<!-- 笔记本采购申请 -->
<template>
	<view class="page">
		<u--form labelPosition="top" :model="model" ref="form" :rules="rules" labelWidth="auto" :labelStyle="{
				fontSize: '14px',
				color: '#B2B2B2',
				lineHight: '20px'
			}">
			<view class="basic-style">
				<view class="basic-title basic-border">新增</view>
				<u-form-item label="单据编号" prop="billNo" :borderBottom="false" required>
					<u--input disabled placeholder="请输入单据编号" v-model="model.billNo"></u--input>
				</u-form-item>
				
				<u-form-item label="申请人" prop="handlerId" :borderBottom="false" required>
					<h-select-person-input style="width: 100%" disabled v-model="model.proposer" placeholder="请选择申请人"
						border="surround" suffixIcon="arrow-down-fill" :suffixIconStyle="{color: '#B2B2B2'}"
						objectField="model.handlerId"></h-select-person-input>
				</u-form-item>
				<u-form-item label="申请部门" prop="proposerDeptId" :borderBottom="false" required>
					<h-select-depart-input disabled v-model="model.proposerDeptId" :departName="model.proposerDeptText"
						placeholder="请选择部门" border="surround" style="width: 100%" suffixIcon="arrow-down-fill"
						:suffixIconStyle="{ color: '#B2B2B2' }"
						:title.sync="model.proposerDeptText"></h-select-depart-input>
				</u-form-item>
				<u-form-item label="申请时间" prop="createTime" :borderBottom="false" required>
					<u--input v-model="model.createTime" disabled placeholder="请选择申请时间" border="surround"
						suffixIcon="calendar-fill" :suffixIconStyle="{color: '#B2B2B2'}"></u--input>
				</u-form-item>
				<u-form-item label="所属团队" prop="teamId" required>
					<h-select-team-input style="width: 100%" v-model="model.teamId" objectField="model.teamId"
						placeholder="请选择所属团队" border="surround" :tdlx="3" suffixIcon="arrow-down-fill"
						:suffixIconStyle="{color: '#B2B2B2'}"></h-select-team-input>
				</u-form-item>
				<u-form-item label="购买金额(元)" prop="purchaseMoney" :borderBottom="false" ref="item1" required>
					<h-money-input placeholder="请输入购买金额" v-model="model.purchaseMoney"></h-money-input>
				</u-form-item>
				<u-form-item label="购买日期" prop="purchaseDate" :borderBottom="false" required>
					<h-time-select v-model="model.purchaseDate" placeholder="请选择购买日期"></h-time-select>
				</u-form-item>
				<u-form-item label="原办公电脑处理方式" prop="oldComputerProcessMode" :borderBottom="false" ref="item1" required>
					<h-dict-select style="width: 100%" v-model="model.oldComputerProcessMode" placeholder="请选择原办公电脑处理方式"
						dictName="old_computer_process_mode" suffixIcon="arrow-down-fill"
						:suffixIconStyle="{color: '#B2B2B2'}"></h-dict-select>
				</u-form-item>
				<template v-if="model.oldComputerProcessMode == '1'">
					<u-form-item label="接收团队" prop="receiveTeam" required>
						<h-select-team-input style="width: 100%" v-model="model.receiveTeam"
							objectField="model.receiveTeam" placeholder="请选择接收团队" border="surround" :tdlx="3"
							suffixIcon="arrow-down-fill" :suffixIconStyle="{color: '#B2B2B2'}"></h-select-team-input>
					</u-form-item>
					<u-form-item label="接收人" prop="receivePeople" required>
						<h-select-person-input-popup v-model="model.receivePeople" class="w-100" placeholder="请选择接收人"
							searchPlaceholder="请输入" border="surround" suffixIcon="arrow-down-fill"
							:suffixIconStyle="{ color: '#B2B2B2' }"></h-select-person-input-popup>
					</u-form-item>
				</template>
				<u-form-item label="备注" prop="remark" :borderBottom="false" ref="item1">
					<u--textarea v-model="model.remark" confirmType="done" placeholder="请输入备注"
						:maxlength="500"></u--textarea>
				</u-form-item>
			</view>
			<view class="basic-style">
				<view class="basic-title-center">
					<u-line :length="105"></u-line>
					<view class="">电脑明细</view>
					<u-line :length="105"></u-line>
				</view>
				<ComputerPurchaseInfo ref="computerPurchaseInfoRef" :dataList="model.detailList">
				</ComputerPurchaseInfo>
			</view>
			<view class="basic-style">
				<view class="basic-title basic-border">附件信息(发票、购买记录)</view>
				<view class="py-1 space-y-1" style="width: 100%">
					<view style="color: red">提示：请等待附件上传完成，再点击保存，否则附件无法保存成功！</view>
					<h-upload-file v-model="model.attachments" :isIcon="false" />
					<file-list v-if="model.attachments" v-model="model.attachments" :isDelete="true"></file-list>
				</view>
			</view>
			<view class="space-x-1 px-1 btn_position">
				<u-button :disabled="isSubmit" type="primary" plain text="保存" @click="save()" />
				<u-button :disabled="isSubmit" type="primary" text="保存提交" @click="saveAndCommit()"
					style="margin-left: 40rpx;" />
			</view>
			<view style="height: 100rpx;"></view>
		</u--form>
		<u-toast ref="uToast"></u-toast>
		<!-- 流程弹窗 -->
		<ProcessNodeConfiguration ref="processConfig" @ok="onOk"></ProcessNodeConfiguration>
	</view>
</template>

<script>
	import fileList from '@/pages/synergy/components/fileList.vue'
	import moment from 'moment'
	import ComputerPurchaseInfo from './components/computerPurchaseInfo.vue'
	import {
		generatedFormNumber, // 获取单据编号
		erpComputerPurchaseAdd, //添加笔记本采购申请-保存
	} from '@/api/index.js'
	import {add,edit,queryById,computerList} from '@/api/purchase/ErpComputerPurchase.js'
	import { mapState } from 'vuex'
	import ProcessNodeConfiguration from '@/components/ProcessNodeConfiguration/ProcessNodeConfiguration.vue' // 流程节点配置人员选择弹窗
	export default {
		components: {
			fileList,
			ComputerPurchaseInfo,
			ProcessNodeConfiguration
		},
		data() {
			return {
				id: '',
				model: {
					billNo: '', // 单据编号
					proposer: '', // 申请人id
					proposerDeptId: '', // 申请部门id
					proposerDeptText: '', //申请部门
					createTime: '', // 申请时间
					teamId: '', //所属团队
					purchaseMoney: '', //购买金额
					oldComputerProcessMode: '', //原办公电脑处理方式
					receiveTeam: '', //接收团队
					receivePeople: '', //接收人
					remark: '', //备注
					detailList: [], //电脑明细
					attachments: null, //附件信息
				},
				rules: {
					billNo:[
						{
							required: true,
							message: '请输入单据编号!',
							trigger: 'blur'
						}
					],
					createTime:[
						{
							required: true,
							message: '请选择申请时间!',
							trigger: 'change'
						}
					],
					proposer:[
						{
							required: true,
							message: '请选择申请人!',
							trigger: 'change'
						}
					],
					proposerDeptId:[
						{
							required: true,
							message: '请选择申请部门!',
							trigger: 'change'
						}
					],
					teamId: [{
						required: true,
						message: '请选择所属团队!',
						trigger: 'change'
					}],
					purchaseMoney: [{
						type: 'number',
						required: true,
						message: '请输入购买金额!',
						trigger: 'change'
					}],
					purchaseDate: [{
						required: true,
						message: '请输入购买日期!',
						trigger: 'change'
					}],
					oldComputerProcessMode: [{
						required: true,
						message: '请选择原办公电脑处理方式!',
						trigger: 'change'
					}],
					receiveTeam: [{
						required: true,
						message: '请选择接收团队!',
						trigger: 'change'
					}],
					receivePeople: [{
						required: true,
						message: '请选择接收人!',
						trigger: 'change'
					}],
				},
				loading: false,
				isSubmit:false,
				 //代码生成后需手动设置流程编码
				        flowCode: 'onl_erp_computer_purchase',
				        formUrl: "erp/workbench/computerPurchase/modules/ErpComputerPurchaseForm",
				        formUrlMobile: "/pages/synergy/ErpComputerPurchaseList",
				        processId:"",
				        beanName: 'erpComputerPurchaseServiceImpl',
			}
		},
		onLoad(options) {
			if (options.id) {
				// 编辑
				this.edit(options.id)
				this.id = options.id
			} else {
				// 添加
				this.add()
			}
		},
		computed: {
		  ...mapState(['userInfo']),
		},
		methods: {
			// 添加
			add() {
				this.getGeneratedFormNumber()
				this.model.createTime = moment().format('YYYY-MM-DD HH:mm:ss'); // 申请时间
				this.model.proposer = uni.getStorageSync('userInfo').empId; //申请人id
				this.model.proposerDeptId = uni.getStorageSync('userInfo').deptId; //申请部门id
			},
			// 获取单据编号
			getGeneratedFormNumber() {
				generatedFormNumber({
					prefix: 'BJBCG',
					subSystemCode: '04'
				}).then(res => {
					if (res.success) {
						this.$set(this.model, 'billNo', res.result)
						//流程标题添加
						this.$set(this.model,'bpmBizTitle',this.userInfo?.employee?.name + '-' + this.model.billNo);
					}
				})
			},
			setUrl(value){
				return this.id ? edit(value):add(value)
			},
			// 保存提交
			async saveAndCommit() {
				const val = await this.$refs.form.validate()
				if (!val) return
				this.model.detailList = this.$refs.computerPurchaseInfoRef.getData()
				if (!this.model.detailList.length) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请添加电脑明细",
						icon: 'none'
					})
					return
				}
				try {
					this.isSubmit = true
					const response = await this.setUrl({
						...this.model,
					})
					  this.$u.toast(response.message)
					  if (response.success) {
						var that = this
						// 获取流程列表
						if (this.model.id) {
							this.getProcessList(this.model.id)
						} else {
						// 判断添加的时候是否有返回id值
							if (response.result) {
								this.getProcessList(response.result)
							}
						}
						this.$refs.uToast.show({
							message: response.message,
							type: 'default',
							complete () {
								// that.isSubmit = false
							}
						})
					}
				} finally {
				  // this.loading = false
				}
			},
			// 保存
			async save() {
				// const val = await this.$refs.form.validate()
				// if (!val) return
				this.model.detailList = this.$refs.computerPurchaseInfoRef.getData()
				// if (!this.model.detailList.length) {
				// 	this.$refs.uToast.show({
				// 		type: 'error',
				// 		message: "请添加电脑明细",
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				this.isSubmit = true
				this.setUrl(this.model).then(res => {
					if (res.success) {
						this.$refs.uToast.show({
							message: res.message,
							type: 'default',
							complete () {
								this.isSubmit = false
								if (getCurrentPages().length > 1) {
									uni.navigateBack()
								} else {
									uni.reLaunch({
										url: '/pages/home/home'
									})
								}
								
							}
						})
					} else {
						this.$refs.uToast.show({
							message: res.message,
							type: 'error'
						})
					}
				}).finally(() => this.loading = false)
			},
			async edit(id){
				let res = await queryById({id})
				if( res?.result) {
					this.model = res.result
					this.model.oldComputerProcessMode = res.result.oldComputerProcessMode + ''
				}
				let com_List = await computerList({purchaseBillId:id})
				if(com_List?.result?.length > 0 ) {
					this.$nextTick(()=>{
						this.$set(this.model,'detailList',com_List.result)
						this.$refs.computerPurchaseInfoRef.dataSource = com_List.result
					})
					
				}
			},
			// 获取流程列表
			getProcessList (id) {
				if (this.isSubmit) {
					this.$refs.processConfig.showPopup = true
					this.$refs.processConfig.formUrl = this.formUrl
					this.$refs.processConfig.formUrlMobile = this.formUrlMobile
					this.$refs.processConfig.flowCode = this.flowCode
					this.$refs.processConfig.edit(id, this.processId, this.beanName)
				}
			},
			// 提交流程成功
			onOk () {
				this.$refs.uToast.show({
					message: '提交成功',
					type: 'success',
					complete () {
						if (getCurrentPages().length > 1) {
							uni.navigateBack()
						} else {
							uni.reLaunch({
								url: '/pages/home/home'
							})
						}
						
					}
				})
			},
		}
	}
</script>


<style lang="scss" scoped>
	@import url("@/assets/inputStyle.scss");
</style>